<!DOCTYPE html>
<html>
<head>
<title>Connect4</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"
	charset="UTF-8">
<script src="<?php echo base_url(); ?>assets/js/jquery-2.0.3.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js"></script>
<link href="<?php echo base_url(); ?>assets/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="<?= base_url() ?>/js/jquery.timers.js"></script>
<script>
	$(function(){
		$('#availableUsers').everyTime(500, function(){
			$('#availableUsers').load('<?= base_url() ?>index.php/arcade/getAvailableUsers');

			$.getJSON('<?= base_url() ?>index.php/arcade/getInvitation', function(data, text, jqZHR){
				if(data && data.invited) {
					var user = data.login;
					var time = data.time;
					if(confirm('Play ' + user)) {
						$.getJSON('<?= base_url() ?>index.php/arcade/acceptInvitation', function(data, text, jqZHR){
							if(data && data.status == 'success') {
								window.location.href = '<?= base_url() ?>index.php/board/index';
							}
						});
					} else
						$.post("<?= base_url() ?>index.php/arcade/declineInvitation");
				}
			});
		});
	});
</script>
</head>
<body>
	<nav class="navbar navbar-default" role="navigation">
		<div class="navbar-inverse">
			<div class="navbar-inner">
				<a class="brand" href="">Connect4</a>
				<p class="navbar-text navbar-right pull-right">Hello <?= $user->fullName() ?> 
					<a href="../account/logout" class="navbar-link">(Logout)</a> 
					<a href="../account/updatePassword" class="navbar-link">(Change Password)</a>
				</p>
			</div>
		</div>
	</nav>

	<?php 
		if (isset($errmsg)) 
			echo "<p>$errmsg</p>";
	?>
	
	<div class="row offset1">
		<h2>Available Users</h2>
	</div>
	<div class="row offset1" id="availableUsers">
	</div>
</body>
</html>